<template>
    <el-dialog title="" :visible.sync="dialogTableVisible" :show-close="false" :center="true" top="4.5vh" :close-on-click-modal="true" :before-close="beforeClose">
        <div class="dialogVue relative">
            <h2 class="flex_between align_center">1. 什么是知识库? <span class="el-icon-close" style="cursor: pointer;" @click="beforeClose"></span></h2>
            <p>您可以将您的私有内容上传到机器人数据库，将可以个性定制化机器人回答的内容。</p>
            <div class="box flex_between margin0">
                <div class="li flex_column align_center">
                    <img src="../../../assets/no_repository.png" style="width: 170px; height: 340px; margin-bottom: 15px;">
                    <span style="color: #999;font-size: 12px">没有知识库，AI 无法回答针对性问题</span>
                </div>
                <div class="li flex_column align_center">
                    <img src="../../../assets/yes_repository.png" style="width: 170px; height: 340px; margin-bottom: 15px;">
                    <span style="color: #999;font-size: 12px">使用知识库，AI 针对定制化回答</span>
                </div>
            </div>
            <div style="height: 10px;"></div>
            <h2>2.  使用方式：</h2>
            <div class="box flex_between margin20">
                <div class="boxLi">
                    <img src="../../../assets/case1.png" style="width: 100%; height: 100%;">
                </div>
                <div class="boxLi">
                    <img src="../../../assets/case2.png" style="width: 100%; height: 100%;">
                </div>
                <div class="boxLi">
                    <img src="../../../assets/case3.png" style="width: 100%; height: 100%;">
                </div>
            </div>    
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        beforeClose(){
            this.$emit("beforeClose")
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 800px !important;
    height: 90vh;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 0 !important;
}
:deep(.el-dialog__body) {
    padding: 15px;
}
.dialogVue {
    width: 100%;
    .closeIcon {
        right: -10px;
        top: -10px;
        font-size: 18px;
        cursor: pointer;
    }
    .title {
        color: #111;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    h2 {
        color: #111;
        font-size: 16px;
    }
    p {
        color: #81868E;
        padding-top: 12px;
        line-height: 1.4;
    }
    .box {
        width: 100%;
        .li {
            width: 355px;
            padding:  10px;
            border-radius: 6px;
        }
        .boxLi {
            width: 230px;
            height: 230px;
            background: #f5f5f5;
            border-radius: 6px;
            .title {
                color: #333;
                font-weight: 600;
                text-align: center;
            }
            .sence {
                font-size: 12px;
                color: #81868E;
                padding-top: 20px;
                padding-bottom: 10px;
                line-height: 1.3;
            }
            p {
                color: #AAA;
                font-size: 12px;
                line-height: 1.4;
                padding-top: 10px;
            }
        }
    }
}
</style>